<?php
    session_start();
?>

<!DOCTYPE html>

<html>
<head>
    <title>Mellon Team Collaboratior</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link rel='stylesheet' type='text/css' href='css/fullcalendar.css'>
    <link href="css/melon.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
    <style type="text/css">
    </style>
</head>
<body>
    <div id="navContainer">
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <!-- COLLAPSE BUTTON -->
                    <button class="btn btn-navbar" type="button" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!-- BRAND -->
                    <a class="brand" data-bind="attr: { href: currentUserID() ? '#overview' : '#'}">Melon</a>
                    <!-- LOGGED USER MENU -->
                    <div class="nav-collapse collapse" data-bind="visible: currentUserID">
                        <!-- PAGES -->
                        <ul class="nav" data-bind="foreach: pages">
                            <li data-bind="attr: { class: $data == $parent.currentPage() ? 'active' : '' }">
                                <a data-bind="text: $data, click: $parent.gotoPage"></a>
                            </li>
                        </ul>
                        <form id="logoutForm" class="navbar-form pull-right" method="post" action="ss/controller.php">
                            <button id="logoutBtn" class="btn" data-bind="click: logout">Sign out</button>
                        </form>
                    </div>
                    <!-- DEFAULT MENU -->
                    <div class="nav-collapse collapse" data-bind="visible: !currentUserID()">
                        <!-- LOGIN FORM -->
                        <form id="loginForm" class="navbar-form pull-right" method="post" action="ss/controller.php">
                            <input id="loginMail" class="span2" type="text" placeholder="Email" data-bind="click: hidePopover">
                            <input id="loginPass" class="span2" type="password" placeholder="Password" data-bind="click: hidePopover">
                            <button id="loginBtn" type="submit" class="btn" data-bind="click: login">Sign in</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="pagesContainer" class="container"></div>
    <div id="footerContainer"></div>
    <script src="js/lib/jquery-1.9.1.min.js"></script>
    <script src='js/lib/knockout-2.2.1.js'></script>
    <script src="js/lib/knockout.mapping-latest.js"></script>
    <script src="js/lib/sammy-latest.min.js"></script>
    <script src="js/lib/bootstrap.min.js"></script>
    <script src="js/models.js"></script>
    <script src="js/navigationViewModel.js"></script>
    <script>
    (function () {
        ko.applyBindings(
            new NavigationViewModel(),
            document.getElementById('navContainer'));
    }());
    </script>
</body>
</html>